<script type="text/javascript" src="j/pagination/jquery.pagination.js"></script>
<script type="text/javascript">	
	
	 /**
	 * Callback function that displays the content.
	 *
	 * Gets called every time the user clicks on a pagination link.
	 *
	 * @param {int}page_index New Page index
	 * @param {jQuery} jq the container with the pagination links as a jQuery object
	 */
	function pageselectCallback(page_index, jq){
			//$('#Searchresult').animate({opacity: 0.0}, 500, 'swing', function(){
				var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
				$('#Searchresult').empty().append(new_content);
				$('.member_link').unbind();
				reassert('.member_link')			
			//})
			//$('#Searchresult').animate({opacity: 1.0}, 500)
		return false;
	}
   
	/** 
	 * Callback function for the AJAX content loader.
	 */
	function initPagination() {
		var num_entries = $('#hiddenresult div.result').length;
		// Create pagination element
		$("#Pagination").pagination(num_entries, {
			num_edge_entries: 2,
			num_display_entries: 8,
			callback: pageselectCallback,
			items_per_page:1
		});
	 }

	$(document).ready(function(){ 
		initPagination();
	});
</script>

<h2>{{members_title}}</h2>
<div id="Pagination" class="pagination"></div>
<div style="clear:both;"></div>
<div class="memberlistitems">

	<div style="float:left; width:300px;">
        <div class="memberitem-username">
            Username
        </div>
        <div class="memberitem-rank">
            Rank
        </div>
	</div>
	<div style="float:left; width:300px;">
        <div class="memberitem-website">
            Website
        </div>
        <div class="memberitem-location">
            Location
        </div>
    </div>
	<div style="float:right; width:100px;">
        <div class="memberitem-posts">
            Posts
        </div>
    </div>
</div>

    <div id="Searchresult" class="listoutbox">
    </div>
    <div style="clear:both;"></div>
<div id="hiddenresult" style="display:none;">
    {{list_html}}
</div>
<div style="clear:both;"></div>
<div class="clear"></div>
        